<template>
    <div class="head_tabs">
      <keep-alive>
          <el-tabs
              v-model="HeaderTabsActiveName"
              type="card"
              @tab-click="handlePathSwicth"
              class="handleTabs"
              closable
              @tab-remove="removeHeaderTabsList"
          > 
              <el-tab-pane
                  v-for="(item,index) in HeaderTabsList"
                  :key="index"
                  :label="item.topic"
                  :name="item.path"
                  >
              </el-tab-pane>
          </el-tabs>
      </keep-alive>
    </div>
</template>
<script setup>
import { ref ,watch,computed, onMounted} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';
// 声明路由对象
const router = useRouter();
// 声明vuex对象
const store = useStore();

const HeaderTabsActiveName = ref('')
const HeaderTabsList = ref([])

onMounted(()=>{
  // 这里的数据都是在vuex中获取的
  HeaderTabsList.value = store.state.HeaderTabs;
  HeaderTabsActiveName.value = store.state.TabsActiveName;
})

// 这里直接监听vuex的数据会导致失效，这里可能是因为vue性能问题，vue的底层没有给vuex的数据也进行数据绑定吧
// 因此，这里使用computed这个api函数来返回vuex中的值，然后将此方法体放入watch中监听
const getTabsActiveName = computed(()=>{
	return store.state.TabsActiveName;
})

// 使用watch监听vuex的数据，并开启第一次绑定监听--immediate 
watch(getTabsActiveName,(o1)=>{
  if(o1){
    // 我们每添加条数据都需要修改相关的tabs索引，否则选中项是不会高亮的
    HeaderTabsActiveName.value = o1;
  }
},{ immediate: true })

// 标签点击触发
const handlePathSwicth = (targetName)=>{
  let name = targetName.props.name;
  store.commit("updateTabsActiveName",name);
  HeaderTabsActiveName.value = name;
  // 手动跳转，组件不会提供跳转功能
  router.push({
    path:name
  })
}
// 删除tabs触发
const removeHeaderTabsList = (targetName) => {
  // 使用vuex中自定义的方法删除数据
  store.commit('removeHeaderTabs', targetName)

  setTimeout(()=>{
    // 利用定时器达到延时方法，防止HeaderTabsActiveName还未变就执行下面的跳转
    router.push({
      path:HeaderTabsActiveName.value
    })
  },0)
}
</script>
